<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	.ok{
		color:green;
	}
	.error{
		color:red;
	}
</style>

</head>
<body>
	名字：<input type="text" id="name" onblur="checkName()"/>
	<span id="nameExistMsg">5-10位数字、字母、下划线</span><br />
	邮箱：<input type="text" id="email" onblur="checkEmail()" />
	<span id="emailMag">必须符合邮箱格式</span>
	
	 <script src="/Java823Web/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
	 <script>
function checkName() {
	var name=$("#name").val();
	var span=document.getElementById("nameExistMsg");
	var reg=/^\w{5,10}$/;//5-10位 数字、字母、下划线
	//先验证格式 用红绿span 标明是否符合
	if (name.match(reg)) {
		span.className="ok";
	}else {
		span.className="error";
		return;
	}
	//再用ajax请求验证这个用户名
	$.post(
		"/Java823Web/student?method=checkName",
		{"name":name},
		function(data){
			if(data.isExist) {
				$("#nameExisMsg").html("该用户已经存在");
				$("#nameExisMsg").css("color","red");
			}else{
				$("#nameExisMsg").html("该用户名可以使用");
				$("#nameExisMsg").css("color","green");
			}
		},
		"json"
	);
}

function checkEmail() {
	var email=document.getElementById("email").value;
	var span=document.getElementById("emailMsg");
	//设置邮箱格式
	var reg=/^[a-zA-Z0-9_-]+@\w+(\.[a-zA-Z0-9]+)+$/;
	if (email.match(reg)) {
		span.className="ok";
	}else{
		span.className="error";
	}
}
	
</script>
</body>
</html>